Feliz Navidad 2012

DESCARGA

En Snook nos explican la forma de utilizar un contenedor y que al pasar el ratón nos muestre un contenido extra. El ejemplo del autor puede verse aquí.
Y añadiendo una imagen tal como sugiere el resultado sería el que vemos a continuación: 

Here's what you have.

Here's more of a description of what we have going on here.

Para hacerlo utilizamos CSS. Nos situamos antes de ]]></b:skin> y añadimos lo siguiente:

.infobox {
    position:relative;
    border:1px solid #000; 
    background-color:#CCC;
    width:73px;
    padding:5px;
    }
.infobox img {
 position:relative;
 z-index:2;
    }
.infobox .more {
 display:none;
    }
.infobox:hover .more {
 display:block;
    position:absolute;
    z-index:1;
    left:-1px;
    top:-1px;
    width:73px;
    padding:78px 5px 5px;
    border:1px solid #900;
    background-color:#FFEFEF;
    }

Guardamos los cambios y en un gadget de HTML añadimos los siguiente:

<div class="infobox">
   <img src="Url-de-la-imagen">
   <div>Here's what you have.</div>
 <div class="more">Texto oculto</div>
</div> 

Retocando un poco el CSS podemos hacer lo mismo y que resulte algo más vistoso.

Bienvenidos a este blog!

Autodidacta por vocación y apasionada del diseño y todo lo relacionado con Blogger.
Colaboradora en www.reinventaweb.com

De igual forma nos situaríamos antes de ]]></b:skin> y añadimos los estilos:

<style type="text/css">
    .infobox {
    background-color: #FFFFFF;
    padding: 0;
    position: relative;
    width: 100px;
}
.infobox h2 {
    color: #000000;
    font-size: 11px;
    letter-spacing: 1px;
    margin: 10px 0 0 20px !important;
    padding: 0 0 0 10px !important;
    text-align: left;
    text-shadow: 1px 1px 0 #CCCCCC;
    text-transform: none;
}
.infobox img {
    border: 3px solid #FFFFFF;
    border-radius: 100px 100px 100px 100px;
    box-shadow: 1px 1px 1px #333333;
    float: left;
    margin: 10px 25px 5px 10px;
    opacity: 0.9;
    position: relative;
    width: 95px;
    z-index: 2;
}
.infobox .more {
    display: none;
}
.infobox:hover .more {
    background-color: #BF7195;
    border: 3px double #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    color: #FFFFFF;
    display: block;
    left: 0;
    padding: 15px 10px 10px 120px;
    position: absolute;
    top: -10px;
    width: 200px;
    z-index: 1;
    height: 135px;
}
.infobox:hover a {
  text-shadow: none;
    color: #000000;
}
</style>

<div class="more">
<span style="color: white; font-family: Arial, Verdana,Tahoma,; font-size: 12px; text-shadow: 1px 1px 1px #000000;">Contenido oculto<br> Texto en negrita </span><a target="_blank" href="Url-del-enlace">Texto enlace</a></div>
</div>

Los cambios a realizar está detallados en el HTML, en "Contenido oculto" lo sustituimos por el contenido que deseamos mostrar. "Texto en negrita" es el texto final y si no lo deseamos simplemente eliminamos la línea de texto.

Y por último donde "Url-del-enlace" y "Texto-enlace" lo sustituimos también por el nuestro o simplemente eliminamos esa linea pero respetando los dos cierres finales de la etiqueta </div>

Si exagerásemos nuestras alegrías, como hacemos con nuestras penas, nuestros problemas perderían importancia.

Anatole France

Hace unos años cuando se hablaba de transiciones uno se imaginaba que en un futuro podríamos crear efectos fantásticos utilizando solamente CSS y así ha sido.

 Vagabundia definía muy bien lo que es una transición diciendo "Una transición es aquello que ocurre entre un momento y otro" recomiendo a quien esté interesado visitar su blog para comprender y aprender a utilizar las transiciones.

El abanico de efectos es muy amplio, hace unos meses aquí hablamos sobre "Transición entre colores con animación" o "Transición con CSS3 en una imagen"

Este otro efecto de hoy lo he visto en Codrops es el que más me ha gustado de los que ofrece en esta demo

Para conseguir este efecto nos situamos en plantilla en edición de HTML y justo antes de ]]></b:skin> añadimos el CSS. 

.ch-item {
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: default;
    height: 100%;
    position: relative;
    width: 100%;
}
.ch-info-wrap {
    background: transparent url(URL) repeat scroll 0 0 ;
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 3px rgba(115, 114, 23, 0.8) inset;
    height: 180px;
    left: 20px;
    perspective: 800px;
    position: absolute;
    top: 20px;
    transition: all 0.4s ease-in-out 0s;
    width: 180px;
}
.ch-info {
    border-radius: 50% 50% 50% 50%;
    height: 180px;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 0.4s ease-in-out 0s;
    width: 180px;
}
.ch-info > div {
    backface-visibility: hidden;
    background-position: center center;
    border-radius: 50% 50% 50% 50%;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}
.ch-info .ch-info-back {
    background: none repeat scroll 0 0 #000000;
    transform: rotate3d(0, 1, 0, 180deg);
}
.ch-img-1 {
    background-image: url("url-imagen-220x220");
}
.ch-info h3 {
    color: #FFFFFF;
    font-family: 'Open Sans',Arial,sans-serif;
    font-size: 14px;
    height: 50px;
    letter-spacing: 2px;
    margin: 0 15px;
    padding: 40px 0 0;
    text-shadow: 0 0 1px #FFFFFF, 0 1px 2px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}
.ch-info p {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 12px;
    font-style: italic;
    margin: 0 30px;
    padding: 10px 5px;
}
.ch-info p a {
    color: rgba(255, 255, 255, 0.7);
    display: block;
    font-family: 'Open Sans',Arial,sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
    padding-top: 4px;
    text-transform: uppercase;
}
.ch-info p a:hover {
    color: rgba(255, 242, 34, 0.8);
}
.ch-item:hover .ch-info-wrap {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 3px rgba(115, 114, 23, 0.8) inset;
}
.ch-item:hover .ch-info {
    transform: rotate3d(0, 1, 0, -180deg);
}
.ch-grid {
    display: block;
    list-style: none outside none;
    margin: 20px 0 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
.ch-grid:after, .ch-item:before {
    content: "";
    display: table;
}
.ch-grid:after {
    clear: both;
}
.ch-grid li {
    display: inline-block;
    height: 220px;
    margin: 20px;
    width: 220px;
}

Donde dice url-imagen-220x220 es el lugar para pegar nuestra imagen.

.ch-img-1 { 
 background-image: url("url-imagen-220x220"); 
} 

 Guardamos los cambios y el HTML lo añadimos donde deseamos mostrar el efecto.

<ul class='ch-grid'>
   <li>
    <div class='ch-item ch-img-1'>               
        <div class='ch-info-wrap'>
            <div class='ch-info'>
                <div class='ch-info-front ch-img-1'></div>
                <div class='ch-info-back'>
                    <h3>AQUÍ-TÍTULO</h3>
                    <p>TEXTO O SUBTÍTULO<a href='AQUÍ-URL-ENLACE'>AQUÍ-TEXTO-ENLACE</a></p>
                </div>   
            </div>
        </div>
    </div>
</li>
</ul>

En el HTML es el lugar donde añadiremos el título, subtitulo y enlace.

El amigo ha de ser como el dinero, que antes de necesitarlo, se sabe el valor que tiene.

Guido van Rossum

REFERENCIA Y DESCARGAWallpapers a full

Los generadores nos ahorran mucho tiempo porque vemos en vista previa el resultado en lugar de hacer una y mil pruebas.
Con border-image-generator conseguimos que cualquier imagen sea el borde de nuestras imágenes para el blog. Lo ideal, sería que la imagen para el borde sea tipo textura o con motivos no demasiado grandes.

Si marcamos la casilla "Fill Center" conseguimos que la imagen ocupe también el fondo, esto puede ser útil cuando añadimos imágenes png. (fondo transparente)

Para que ese borde se muestre en nuestras imágenes del blog buscamos en la plantilla algo así:

 .post img, table.tr-caption-container { 
  padding:4px; 
  border:1px solid $bordercolor; 
}

Eliminamos lo marcado en rojo y ahí añadimos los estilos que nos proporciona el generador.

No guardes los cambios hasta comprobar en vista previa que todo está correcto.

Son gratuitas, y aunque este tipo de fuente no suele usarse habitualmente nos viene muy bien tenerlas en nuestro PC para crear nuestros propios rótulos y decorar el blog o diseñar tarjetas de invitación. 

Descarga – Vampiress

Descarga – HalloweenKiddy

Si quieres ver más en Fonts2U tienes un buen surtido.

Y hablando de editores y de retoques, los usuarios del famoso editor de imágenes Picnik ya tienen un sustituto, se llama Ribbet también es gratuito y ofrece las mismas funcionalidades incluso la misma interfaz que el añorado Picnik. 

En el rato que estuve probando lo he encontrado bastante más rápido y con la particularidad que al registrarse podemos acceder a los servicios Premium, no sé si es algo provisional pero ahí está mientras pueda aprovecharse.

Para los que buscan una forma sencilla de añadir efectos a las fotografías Picfull se lo pone fácil. Es una aplicación con gran variedad de efectos y lo que es mejor muy rápida ya que en tres sencillos pasos obtenemos el resultado. 

Una vez descargada la imagen a nuestro PC también podemos compartirla, enviar por e-mail o incluso imprimirla. 

Enlace Picfull

Referencia y descarga: Fonts2u

¿Quieres adelgazar fácilmente? Ahora puedes adelgazar de forma rápida y saludable con el método conocido como el "Incinerador de Grasa" que proponen en AdelgazarRápidamente.com

Con este método se pierde peso comiendo hasta quedar saciado llegando a perder hasta 15 kilos en 7 semanas. Así lo asegura el dietista Vicente Pérez que lleva trabajando con este método desde hace 5 años.

El método consta de un programa de nutrición y dieta creado por nuestro dietista y entrenador personal.

Para poner un ejemplo de la relación Programa-Dieta-Ejercicios, si un día tenemos un despiste y comemos algo que no está incluido en la comida de ese día; el programa nos hará una pregunta como esta ¿consumiste algo no incluido en la dieta diaria?. Si la respuesta es que si, el programa modificará la alimentación y los ejercicios a hacer; para de esta manera hacerte perder esa comida consumida.

Si deseas saber más sobre el método en AdelgazaRápidamente.com nos proporcionan más información y fotografías de personas que ya han seguido el programa.

Post patrocinado por gentileza de AdelgazarRápidamente.com

Los motivos de paisley o cachemira los asociamos inmediatamente a pañuelos o corbatas, también podemos utilizarlos dando un toque original como fondo del blog o cualquier elemento decorativo y eso han debido pensar con acierto en Dezignus

Size: 1.8 mb
Format: ABR (created in PS7) + PNGs (with transparent background)
License: For personal / non profit use only

Los efectos en imágenes siempre resultan atrayentes, este en concreto muestra una transición suave utilizando CSS3.

Para hacerlo necesitamos dos imágenes de la misma medida y que esa medida esté indicada en los estilos, es decir, que todas las imágenes a mostrar con este efecto tendrán la misma medida.

Los estilos los añadimos en plantilla edición de HTML justo antes de ]]></b:skin>

Si la imagen la añadimos en un gadget de HTML también podemos añadir los estilos en su interior sin olvidar envolverlos con las etiquetas <style> y </style>

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 550px; /* anchura de la imagen */
height: 434px; /* altura de la imagen */
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease; /* enable transition */
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,550px,434px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */
z-index: 1;
}

a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */
clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */
opacity: 0;
}

a.nowandthen.alt{
width: 300px; /* set width of image container */
height: 354px; /* set height of image container */
}

a.nowandthen.alt img{
clip: rect(0,300px,354px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen.alt:hover img:nth-of-type(1){
clip: rect(0,0,354px,0); /* clip values should be rect(0,0,image_height,0) */
}

Las imágenes las añadimos ahí donde deseamos mostrarlas, ya sea un post o un gadget.

<a class="nowandthen">
 <img src="Url-imagen-beforejt.jpg" alt="">
 <img src="Url-imagen-afteruc.jpg" alt="">
</a>

REFERENCIADynamicdrive

Elegante juego de 12 iconos para indicados para las redes sociales más conocidas.
El tamaño de cada icono es ideal para cualquier proyecto 64px por 64px y el formato en PNG.

REFERENCIA Y DESCARGA:creativeNERDS

¡HOLA!
¿qué tal?

En webintenta nos muestran la posibilidad de crear algunas animaciones sin Javascript o Flash. 

El ejemplo que vemos es el resultado de una transición entre colores y una animación rotando una capa y escalándola. 

.circulo { display:table-cell; border-radius: 50px;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 height:100px;
 width:100px;
 text-align:center;
 vertical-align:middle; }

.circulo span{
color:#000;
 font-family:Arial, Helvetica, sans-serif;
 font-size:21px;
}

/* Para navegadores webkit */
@-webkit-keyframes rotar
{
5%   {background: red;}
25%  {background: yellow;}
70%  {background: blue;}
100% {background: green;}
0% {-webkit-transform:scale(1) rotate(0deg);}
50% {-webkit-transform:scale(1.5) rotate(180deg);}
100% {-webkit-transform:scale(1) rotate(360deg);}
}

/* Para firefox */
@-moz-keyframes rotar
{
5%   {background: red;}
25%  {background: yellow;}
70%  {background: blue;}
100% {background: green;}
 0% {-moz-transform:scale(1) rotate(0deg);}
 50% {-moz-transform:scale(1.5) rotate(180deg);}
 100% {-moz-transform:scale(1) rotate(360deg);}
}
.circulo {
-webkit-animation:cambiar_color 8s linear 1;
 -moz-animation:cambiar_color 8s linear 1;
 -webkit-animation:rotar 4s infinite;
 -moz-animation:rotar 4s infinite;
}

<div class="circulo">
¡HOLA!<br /> ¿qué tal?</div>

Profesionales de la fotografía y no tan profesionales utilizan marcas de agua en sus trabajos.

Los que se inician, o simplemente los que gustan de ir a lo práctico y dejar constancia clara de su autoría suelen utilizar herramientas online como Water Marquee un sitio para añadir marcas de agua en texto o imágenes.

Es gratuito y podemos subir varias imágenes a la vez así como retocar la marca en el vista previa.

DESCARGA:Typography

REFERENCIA:reinventaWEB

Aquí, en España ya tenemos a la vuelta de la esquina el verano. Para alegrarte la vista y dar vidilla a esos días que faltan estos fondos de pantalla alegres y fresquitos son ideales.